<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备地图</title>
    <style>
/*公共头部导航*/
.yellowBg{background:#f3af33;}
.fl{float: left;}
.fr{float: right;}
.mgc{margin:0 auto;}
.rela{position: relative;}
.abso{position: absolute;}
.clearfix:after{content: ' ';display: block;clear: both;visibility:hidden;line-height: 0;height:0;}
.commonHeader-logo{margin-right: 75px;margin-top: 12px;}
a.cmHNb-a{color: #fff;font-weight:400;font-size: 16px;padding: 19px 27px;border-bottom: 1px solid #f3af33;display: inline-block;}
.subtoggleMenu a{color: #fff;display: block;padding-bottom: 8px;}
.subtoggleMenu{background: #f3af33;width: 100%;text-align: center;top:48px;left:0;display: none;font-size: 16px;padding-bottom: 9px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;z-index: 100;}
.commonHeaderNavBox li{float: left;}
.commonHeaderNavBox{height:60px;}
.commonHeaderNav ul a.cur{border-bottom: 1px solid #fff;}
.userHeader-avator img,.userHeader-avator{height: 36px;width: 36px;border-radius:36px;}
.userHeader-menu{margin-top:9px;cursor:pointer;}
.userHeader-name p{color: #fff;max-width:170px;}
.userHeader-name i{margin-top: 5px;color: #fff;}
.userHeader{margin-top: 12px;}
#toggleshowmenu{display: none;top:41px;right:0;z-index: 100;background: #fff;width:100%;border: 1px solid #ddd;-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);width:160px;}
#toggleshowmenu i.i-arrow{right: 4px;top:-11px;z-index: 100;transform:rotate(180deg);-webkit-transform:rotate(180deg);color: #fff;}
#toggleshowmenu a li i.i-set{color: #333;}
#toggleshowmenu a{color: #333;display:block;padding: 6px 0 6px 13px;}
#toggleshowmenu a:hover{background: #eee;}
.yellowBg {background: #f3af33;}
.w1200{max-width:1200px;min-width: 1200px;}
*{margin:0;padding:0}
body{font-family:'Microsoft YaHei';font-size:14px;color:#666;background-color:#fff}
li,ol,ul{list-style-type:none}
img{border-style:none}
a{text-decoration:none;cursor:pointer;color:#666}
a:hover{text-decoration:none}
input{border:none;outline:0;color:#666}
em,i{font-style:normal}
a{text-decoration:none;color:#666;cursor:pointer}
.fl{float:left}
.fr{float:right}
.container{width:1200px;margin:0 auto;overflow:hidden;padding-bottom:89px}
input{font-family:"Microsoft YaHei";color:#666;border:none}
input:focus{outline-color:transparent}
.placeholder{color:#edcb9d!important}
.mainshowboxPtitle{border-bottom:2px solid #f3af33;padding-top:10px}
.mianshowbpt-l{font-size:16px;color:#f3af33;padding:12px 0;font-weight:600}
.mianshowbpt-r a.cur{color:#f3af33}
.mianshowbpt-r a{padding:12px 0 12px 33px;display:inline-block;cursor:pointer}
.pdr10{padding-right:10px}
.pdl10{padding-left:10px}
.oellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.map_box{height:844px;margin:15px 13px 0;position:relative;overflow:hidden}
#allmap{width:100%;height:100%;z-index:-2}
.device-searching-container{position:absolute;top:6px;left:-326px;width:326px;height:768px;box-shadow:1px 1px 3px #dcdad8;z-index:5}
.device-searching-top{width:100%;height:149px;border-radius:4px 4px 0 0;background:#f3af33;overflow:hidden}
.close-btn{position:absolute;top:11px;right:11px;cursor:pointer;width:14px;height:14px;background:url(images/icon.png) no-repeat -138px 0}
.device-searching-box{width:263px;height:35px;background:#de9c24;border-radius:18px;margin:47px auto 31px;position:relative}
.search-input{width:100%;height:35px;line-height:35px;background:0 0;box-sizing:border-box;padding:0 27px;color:#edcb9d}
::-webkit-input-placeholder{color:#edcb9d}
:-moz-placeholder{color:#edcb9d}
::-moz-placeholder{color:#edcb9d}
:-ms-input-placeholder{color:#edcb9d}
.device-searching-box a{cursor:pointer;position:absolute;top:8px;right:14px;width:25px;height:25px;line-height:25px;text-align:center}
.device-searching-box a::after{content:url(images/search_icon.png);width:16px;height:16px;display:inline-block}
.device-searching-tab{padding:0 8px;width:100%;box-sizing:border-box;height:36px;overflow:hidden}
.device-searching-tab li{width:33.33%;float:left}
.device-searching-tab li a{display:block;color:#fff;text-align:center;font-size:12px;font-weight:700;line-height:36px}
.device-searching-tab li.active{border-radius:4px 4px 0 0;background:#fff}
.device-searching-tab li.active a{color:#f3af33}
.tab-content{overflow:hidden;height:619px;background:#fff}
.device-searching-list{height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:28px 34px 12px 25px;overflow-y:scroll}
li.device-searching-item{margin-bottom:20px}
li.device-searching-item a{overflow:hidden;display:block;font-size:13px;line-height: 14px;position:relative}
li.device-searching-item.online a{color:#666}
li.device-searching-item.offline a{color:#b2b2b2}
li.device-searching-item.active a{color:#ecac3b}
li.device-searching-item a .listicon{width:14px;height:14px;position:absolute;top:0;left:0}
li.device-searching-item.online a .listicon{background:url(images/listicon_on.png)}
li.device-searching-item.offline a .listicon{background:url(images/listicon_off.png)}
li.device-searching-item.active a .listicon{background:url(images/listicon_Orange.png)}
li.device-searching-item .device-number{margin-right:14px;padding-left:24px;width:78px;}
.customer-name{width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickupBtn{display:block;width:62px;height:62px;position:absolute;top:0;left:0;background:url(images/pickupBtn.png) no-repeat center center}
.pickupBtn:active{background-images:url(images/pickupBtn_on.png)}
.BMap_bubble_title{line-height:16px!important;color:#f3af33;font-size:16px;font-weight:700;margin:0 0 0 3px}
.pop .center,.pop .top{border:none!important}
.pop>img:nth-of-type(1){opacity:0;width:20px!important;height:25px!important;top:0!important;left:336px!important}
.pop::after{content:'';width:20px!important;height:25px!important;background:url(images/close.png);display:block;position:absolute;top:0!important;left:336px!important;z-index:99}
.pop>div:nth-child(1) img,.pop>div:nth-child(3) img,.pop>div:nth-child(5) img,.pop>div:nth-child(7) img{opacity:0}
.pop>div:nth-child(1),.pop>div:nth-child(3),.pop>div:nth-child(5),.pop>div:nth-child(7){width:40px!important;height:40px!important;background:#fff;border-radius:10px}
.pop>div:nth-child(3){left:330px!important}
.pop>div:nth-child(5){top:174px!important}
.pop>div:nth-child(7){top:174px!important;left:330px!important}
.BMap_bubble_content div.BMap_con{background:#fffdfa;width:340px;margin:10px auto 0;padding:15px;border:1px solid #ffeecf!important;border-radius:2px;color:#666;font-size:13px;line-height:22px;box-sizing:border-box}
.BMap_con p{margin:0}
.BMap_btn{margin-top:11px;text-align:right;height:26px;}
.BMap_btn a{color:#fff;font-size:12px;display:inline-block;text-align:center;line-height:26px;border-radius:15px;background:#f3af33;width:88px;height:26px;text-decoration:none}
.masking {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 9;
    display: none;
}
.layerBoxing {
    width: 700px;
    height: 450px;
    border-radius: 3px;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -225px 0 0 -350px;
    z-index: 100;
    display: none;
}
.layerboxTitle {
    width: 96%;
    border-bottom: 2px solid #f3af33;
    padding-bottom: 8px;
    margin-bottom: 36px;
}
.layerboxTitle span {
    padding-top: 6px;
    font-size: 16px;
}
.closeLayerbox {
    width: 20px;
    height: 25px;
    background: #f3af33;
    color: #fff;
    display: inline-block;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
.mainFormbox {
    width: 509px;
}
.formeachlaber {
    margin-bottom: 24px;
}
.formeachlaber i {
    width: 84px;
    display: inline-block;
    font-style: normal;
    text-align: right;
}
.formeachlaber input.formenterEach {
    border-radius: 12px;
    padding: 5px 7px;
    border: 1px solid #cbcbcb;
    color: #e1a22e;
    width: 280px;
    margin-left: 14px;
}
.formeachlaber select.yurauthr, .formeachlaber select.yurauthr2,.formeachlaber select.yurauthr3 {
    top: 4px;
    left: 112px;
    border: none;
    width: 139px;
    color: #e1a22e;
}
.formeachlaber {
    margin-bottom: 24px;
}
.nosee {
    display: none!important;
}
.formeachlaber input.createdDate {
    width: 169px;
    margin-right: 29px;
}
.formeachlaber input.formenterEach {
    border-radius: 12px;
    padding: 5px 7px;
    border: 1px solid #cbcbcb;
    color: #e1a22e;
    width: 280px;
    margin-left: 14px;
}
.formeachlaber .toggleSwitchIDing {
    position: absolute;
    top: 8px;
    right: 73px;
}
.toggleSwitchIDing {
    position: relative;
    width: 40px;
    height: 8px;
    border-radius: 5px;
    margin: 0 auto;
}
.toggleSwitchIDing input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: -7px;
    left: 0;
    z-index: 6;
    width: 40px;
    height: 18px;
}
input {
    border: none;
    outline: none;
    color: #666;
}
.toggleSwitchIDing .btn {
    display: block;
    position: absolute;
    z-index: 4;
    top: -6px;
    left: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    transition: left .25s ease;
    background: #fff;
    border: 1px solid #c4c4c4;
}
.toggleSwitchIDing .bg {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background: #959595;
}
.formSubmitBtn {
    width: 321px;
}
.formSubmitBtn a {
    padding: 9px 58px;
    border-radius: 50px;
    background: #f3af33;
    color: #fff;
    float: left;
}
.formSubmitBtn .cancelBtning {
    padding: 9px 58px;
    border-radius: 50px;
    cursor: pointer;
    background: #f4f8f9;
    border: 1px solid #e5ebed;
    color: #4d6378;
    float: right;
}
.txtc {
    text-align: center;
}
.spinner {
    position: relative;
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    top: 50%;
}.spinner .three-bounce {
    position: relative;
    text-align: center;
    top: 50%;
    bottom: 50%;
    margin-top: -9px;
}
.spinner .three-bounce .one {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s;
}
.spinner .three-bounce>div {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    top: 50%;
    margin-top: -9px;
    background: #f3af33;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}.spinner .three-bounce .two {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s;
}.flytip-inner {
    position: fixed;
    top: 45%;
    z-index: 999999;
    width: auto;
    line-height: 24px;
    margin: 0 auto;
    background: rgba(0,0,0,.6);
    color: #fff;
    text-align: center;
    padding: 19px 14px;
    font-size: 14px;
    border-bottom: 1px solid #000;
    border-radius: 6px;
    display: inline-block;
    opacity: 0;
    transition: .3s opacity;
}
@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}
    </style>

</head>

<body>

<div class="commonHeader yellowBg">
    <div class="commonHeader-c clearfix mgc yellowBg w1200">
        <div class="commonHeader-logo fl"><img src="images/logo.png" alt="葆德压缩空气管理系统"></div>
        <div class="commonHeaderNav fl">
            <ul class="commonHeaderNavBox clearfix">
                <!-- <li  class="rela"><a class="cmHNb-a"></a><div class="subtoggleMenu abso"><a></a></div></li> -->
            </ul>
        </div>
        <div class="userHeader fr clearfix">
            <div class="userHeader-avator fl"><img src="images/avatar3.jpg" alt=""></div>
            <div class="userHeader-menu fl rela" id="showmyAccountMenu">
                <div id="loginUserBar" class="userHeader-name clearfix"><p id="loginUserNameText" class="pdl10 pdr10 fl oellipsis"></p><i class="xwl i-sarrow fl"></i></div>
                <ul id="toggleshowmenu" class="abso">
                    <i class="xwl i-arrow fl abso"></i>
                    <a id="yourActSetting" class="actSeting" data-code="1" href="javascript:;"><li><i class="xwl i-set pdr5"></i>账号设置</li></a>
                    <a id="exitSystem" href="javascript:;"><li><i class="xwl i-exit pdr5"></i>退出</li></a>
                </ul>
            </div>
            
        </div>
    </div>
</div>


<div class="container">
    <!-- 面包屑 -->
    <div class="mainshowboxPtitle clearfix">
        <div class="mianshowbpt-l fl"><span>首页</span></div>
        <div class="mianshowbpt-r fr"><!-- <a data-id="402" href="accoutManage.html" class="cur">账号设备</a><a data-id="403" href="#">分析报表</a> --></div>
    </div>

    <div class="map_box">
        <div id="allmap"></div>
        <div class="device-searching-container">

            <div class="device-searching-top">
                <div class="device-searching-box">
                    <input type="text" class="search-input" placeholder="搜索编号、名称、卡号、型号" id="search-input">
                    <a class="search-icon"></a>
                </div>

                <!--设备搜索tab栏-->
                <ul class="device-searching-tab">
                    <li class="active" id="all-btn">
                        <!-- <a href="#all">所有<span id="allNum"></span></a> -->
                        <a href="javascript:;" class="allshowing">所有<span id="allNum"></span></a>
                    </li>
                    <li id="online-btn">
                        <!-- <a href="#online">在线<span id="onlineNum"></span></a> -->
                        <a href="javascript:;" class="allshowing">在线<span id="onlineNum"></span></a>
                    </li>
                    <li id="offline-btn">
                        <!-- <a href="#offline">离线<span id="offlineNum"></span></a> -->
                        <a href="javascript:;" class="allshowing">离线<span id="offlineNum"></span></a>
                    </li>
                </ul>

                <!--关闭按扭-->
                <div class="close-btn"></div>
            </div>

            <!--设备搜索列表-->
            <div class="tab-content">
                <!-- 所有 -->
                <ul class="device-searching-list" id="all"></ul>

                <!-- 在线 -->
                <ul class="device-searching-list" id="online"></ul>

                <!-- 离线 -->
                <ul class="device-searching-list" id="offline"></ul>
            </div>
        </div>

        <!--展开按钮-->
        <a type="button" class="pickupBtn"></a>
    </div>

</div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script data-main="js/dem_atlas" src="js/lib/resq.js?vs51"></script>
<link rel="stylesheet" type="text/css" href="css/i.css?v2">


